<template>
  <div class="container">
    <el-card>
      <el-form ref="form" :model="query" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="query.keyword"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18" style="text-align:right;">
            <el-button size="small" @click="clear">清除</el-button>
            <el-button size="small" type="primary" @click="search">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-alert :title="'数据一共' + count + '条'" type="info" show-icon :closable="false" />

      <template>
        <el-table :data="data" style="width: 100%">
          <el-table-column prop="id" label="编号" width="280"> </el-table-column>
          <el-table-column prop="questionType" label="题型" width="180">
            <template slot-scope="scope">
              <p v-if="scope.row.questionType === '1'">单选</p>
              <p v-else-if="scope.row.questionType === '2'">多选</p>
              <p v-else>简答</p>
            </template>
          </el-table-column>
          <el-table-column prop="questionIDs" label="题目编号" width="280">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.questionIDs" :key="index">
                <p @click="Preview(item.id)" style="color: #09f;cursor: pointer;line-height: 10px;">{{ item.number }}
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="220"> </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)" width="180"> </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)" width="180"> </el-table-column>
          <el-table-column prop="userName" label="录入人" width="180"> </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="danger" icon="el-icon-delete" plain circle @click="remove(scope.row)">
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <el-row style="text-align: right; margin-top: 20px; margin-bottom: 15px;">
        <el-pagination :current-page="query.page" :page-size="query.pagesize" :page-sizes="[5, 8, 10, 20]"
          @current-change="handleCurrentChange" @size-change="handleSizeChange"
          layout="prev, pager, next, sizes, jumper" background :total="count" />
      </el-row>
      <!-- 分页 -->
      <!-- 预览 -->
      <questionsPreview :dialogVisible="dialogVisible" @close="dialogVisible = false" :preview="preview">
      </questionsPreview>
      <!-- 预览 -->
    </el-card>
  </div>
</template>

<script>

import { getRandoms ,deleteRandoms} from '@/api/hmmm/questions'
import { preview } from '@/api/hmmm/questions'
import questionsPreview from '@/module-hmmm/components/questions-preview'
export default {
  name: 'Tags',
  data () {
    return {
      dialogVisible: false,
      preview: {},
      query: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      count: 0,
      data: []
    }
  },

  components: {
    questionsPreview
  },
  created () {
    this.getRandoms()
  },
  methods: {
    // 清除关键字输入框
    clear () {
      this.keyword = ''
      this.query.keyword = ''
      this.getRandoms()
    },
    // 搜索功能
    search () {
      this.query.page = 1
      this.getRandoms()
    },
    // 当前点击的页码
    handleCurrentChange (val) {
      this.query.page = val
      this.getRandoms()
    },
    // 每页条数
    handleSizeChange (val) {
      this.query.pagesize = val
      this.query.page = 1
      this.getRandoms()
    },
    // 获取题组
    async getRandoms () {
      const { data } = await getRandoms(this.query)
      this.data = data.items
      this.count = data.counts
    },
    // 题目编号预览
    async Preview(id) {
      try {
        this.dialogVisible = true
        const res = await preview(id)
        this.preview = res.data
      } catch (error) {
        this.$message.info('数据未找到')
        return error
      }
    },

    // 删除题组
    async remove (item) {
      const res = await this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (res === 'confirm') {
        await deleteRandoms(item)
        this.$message.success('删除成功!')
        this.getRandoms()
      }
    }
  }
}

</script>

<style>
</style>
